/*
 * @Author: yangrongxin
 * @Date: 2021-09-02 10:15:34
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-15 14:25:45
 */

import { Component } from 'react';
import F2Canvas from '@/components/F2Component';

import { Chart } from '@antv/f2/lib/core';
import '@antv/f2/lib/geom/interval';

import Legend from '@antv/f2/lib/plugin/legend';
import Tooltip from '@antv/f2/lib/plugin/tooltip';

import '@antv/f2/lib/component/guide/text';

import Guide from '@antv/f2/lib/plugin/guide';
import PieLabel from '@antv/f2/lib/plugin/pie-label';

import '@antv/f2/lib/coord/polar';

import '@antv/f2/lib/geom/adjust/stack';

export default class PieChart extends Component<any, any> {
  onInit = (config) => {
    const { charData, maxCount = 0 } = this.props;
    let data = charData || [
      {
        item: '交通出行',
        count: 33,
      },
      {
        item: '饮食',
        count: 33,
      },
      {
        item: '生活日用',
        count: 34,
      },
    ];
    data = data.map((item: any) => {
      return {
        const: 'const',
        ...item,
      };
    });
    Chart.plugins.register([Legend, Tooltip, Guide, PieLabel]);
    const chart = new Chart({
      ...config,
    });

    chart.source(data);
    chart.coord('polar', {
      transposed: true,
      radius: 0.9,
      innerRadius: 0.5,
    });
    chart.axis(false);
    chart.legend({
      position: 'right',
      verticalAlign: 'bottom',
      offsetX: -20,
    });
    chart.tooltip(true);
    // TODO: 展示总人数 未来使用html进行替换
    chart.guide().text({
      position: ['50%', '50%'],
      content: `总人数${maxCount}人`,
      style: {
        fontSize: 14,
      },
    });
    chart
      .interval()
      .position('const*count')
      .adjust('stack')
      .color('item', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14']);
    chart.render();
    return chart;
  };

  render() {
    return <F2Canvas onInit={this.onInit.bind(this)} />;
  }
}
